<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
          ul{
         padding: 0;
         margin: 0;
         margin-top: 0;
         list-style: none;
     }
     ul li {
         border: 1px solid brown;
         height: 50px;
         width: 50px;
         display: inline-block;
         line-height: 50px;
         text-align: center;
         font-size: 30px;
         font-weight: bold;
         margin-left: 5px;
     }
    </style>
    <script>
        window.onload = function(){
            var lists = document.getElementById("lists"),
             btn = document.getElementById("btn"),
             len = 100,
            str = '',
             color = ['tan','skyblue','yellowgreen','orange','pink'];
             btn.onclick = function(){
                 for(var i = 0; i < len; i++){
                    //  "<li>"
                    // '+ Math.floor(i/10) * 55 + '
                    // style=""
                    // '+ aColor[i%aColor.length] +'
                    str += '<li style="top:'+ Math.floor(i/10) * 55 +'px; left:' + i%10 * 55 + 'px;background-color:' + color[i%color.length] + ' ">' + i + '</li>'
                //  str += '<li style="top:'+ Math.floor(i/10) * 55 +'px; left: '+ i%10 * 55 +'px; background-color: '+ color[i%color.length] +'">'+ i +'</li>'
                 }
                 lists.innerHTML = str;
             }
        }
    </script>
</head>
<body>
        <input type="button" value="自动生成100个li" id="btn">
        <ul id="lists"></ul>
</body>
</html>